<template>
    <div class="wrap">
      <!-- 选择框 -->
        <picker 
            mode="selector" 
            :range="cityList"
            range-key="label"
            @change="changeCity"
        >
            <span>{{city.label || '北京'}}</span>    
        </picker>

        <!-- 地图 -->
        <map
            :show-location="true"
            :markers="markers"
            :include-points="markers"
            @labeltap="labelTap"
        >
        </map>


        <div @click="c(10)"></div>
    </div>    
</template>

<script>
import { GetCity , GetHouseMap} from './../../services';
export default {
    data(){
        return {

          // 设置初始值
            cityList: [],
            city: {},
            areaId: '',
            areaList: []
        }
    },

    // 监听
    watch: {
      // areaid的重新赋值
        areaId: {
            handler: async function(value){
              console.log(value);
                if (value){ 
                    // 重新获取值
                    let result = await GetHouseMap(value);
                    if (result.status === 200 && result.body.length ){
                        this.areaList = result.body;
                    }
                }
            },
            deep: true, // 深度监听
            immediate: true, //立即触发
        }
    },
    computed: {
        // 标记的属性
        markers(){
            return this.areaList.map((item, index)=>{
                // 将所有的属性返回
                return {
                    id: index,
                    ...item.coord,
                    label: {
                        content: `${item.label}有${item.count}套房子`,
                        color: '#ffd700',
                        fontSize: 12,
                        padding: 6,
                        bgColor: '#000000cc',
                        textAlign: 'center',
                        borderRadius: 5
                    },
                    width: 0,
                    height: 0
                }
            })
        }
    },
    methods: {
        // 更换列表时更换数据
        changeCity(e){
            this.city = this.cityList[e.target.value];
            this.areaId = this.cityList[e.target.value].value;
        },

        // 点击放大（bushi
        labelTap({detail: {markerId}}){
            this.areaId = this.areaList[markerId].value;
        },

    },
    async onShow(){
        // 初始化数据
        let result = await GetCity();
        if (result.status === 200){
            this.cityList = result.body;
            this.city = this.cityList[0];
            this.areaId = this.city.value;
        }
    },

    

}
</script>

<style>
.wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
map{
    width: 100%;
    flex: 1;
}
</style>